<template>
  <view class="loading-container" v-if="isLoading">
    <view class="loading-wrapper">
      <image class="wrapper-image" src="https://rwstatic.tentons.cn/web/Lesson/images/loading.png" />
      <text class="wrapper-text">加载中...</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useStore } from "vuex";

const store = useStore();

const isLoading = computed(() => {
  return store.state.isShowLoading;
});
</script>

<style scoped lang="scss">
.loading-container {
  width: 100vw;
  height: 100vh;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  z-index: 999 !important;
  user-select: none;
  touch-action: none;

  .loading-wrapper {
    width: 264rpx;
    height: 264rpx;
    border-radius: 24rpx;
    background-color: rgba($color: #9c5c37, $alpha: 0.89);

    .wrapper-image {
      width: 188rpx;
      height: 188rpx;
      margin: 18rpx 38rpx 0;
    }

    .wrapper-text {
      display: block;
      font-size: 28rpx;
      font-family: xiaolai;
      color: #ffffff;
      text-align: center;
    }
  }
}
</style>
